iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

30 天利用 Hexo 打造技術部落格系列 第 10

Day 10:為你的 Hexo 增加頁面:標籤、分類與自訂頁面

  • 分享至 

  • xImage
  •  

昨天介紹新增文章,今天要來介紹新增頁面。這兩者有什麼差別呢?一般來說如果是跟網站有關的資訊、或是一些關於你的介紹,這種比較不適合發在一般文章的,就很適合建立一個頁面,並以 Next 佈景主題為例,設定能透過主選單連到頁面。

如何建立自訂頁面?

建立頁面的指令格式如下:

hexo new page "頁面名稱(網址用)"

建立 about 頁面

以上圖範例為例,我建立了一個 about 頁面,打算利用這個頁面介紹我自己與這個網站,大家也可以依照使用情境建立頁面。

存放位置與頁面資訊

有別於文章與草稿有各自不同的目錄存放,頁面檔案是獨立存放於一個目錄中的,像是我剛剛建立了 about 頁面,頁面存放位置於 ./source/about 內,而檔案名稱為 index.md

因此如果你要將草稿建立成頁面,假設你的頁面叫做「message」,就要在 source 目錄內建立一個名為 message 的目錄,將草稿檔案移進去目錄後,將檔案名稱改為 index.md 即可。

頁面資訊

頁面預設的資訊僅有 title 以及 date,分別是頁面標題與時間,不過這邊我們可以加一個 comments,原因是若之後我們在 Hexo 增加文章留言功能,預設頁面是可以留言的,但有時候我們會希望頁面就是專門提供資訊,不開放留言,就可以增加這段語法。

title: about
date: 2021-08-28 18:46:39
comments: false <!-- 設定為 false 表示不開放留言 -->

接下來的內容,就一樣使用 Markdown 隨你打啦~後續一樣透過指令 hexo g 建立頁面就能看到成果了。

建立文章分類與標籤頁

而 Hexo 本身提供一些能夠連動網站資訊的頁面,例如文章分類標籤頁,建立的方式就跟建立自訂頁面一樣:

# 建立標籤頁
hexo new page tags
# 建立分類頁
hexo new page categories

不過建立之後,我們必須再做一個動作,以標籤為例,我們開啟頁面後,一樣會看到預設的 title 與 date 資訊,此時如果要連接 Hexo 資訊,就要加上 type 資訊,並設定為 tags,範例如下:

title: 標籤
date: 2021-08-28 19:15:03
type: tags <!-- 將頁面類型設定為 tags(標籤) -->
comments: false <!-- 設定頁面不開放留言 -->

於是,就可以在標籤頁看到所有標籤啦!

標籤頁

分類頁也是利用同樣的方式,增加 type 並設定為 categories 即可。

利用主選單連到頁面(以 Next 佈景主題為例)

因為是設定 Next 方面的內容,所以我們要開啟 ./themes/next/_config.yml 檔案並找到以下語法:

menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  #tags: /tags/ || fa fa-tags
  #categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

我們只要把 #tags#categories 解除註解即可,另外 Hexo 很貼心,連同 about 也一起加了 XD 一樣,將 #about 那一行解除註解即可。不過如果你的關於頁面不是設定成 about(或許可能是你的英文名字),那就改成你設定的名稱即可。

後記

如此一來網站基本該有的內容都大致上完成了,雖然後續還有像是留言版的功能,不過這部分就先暫緩,畢竟要先上傳到網路上,才會有人留言嘛!(除非你要自言自語我也是沒意見啦 XD)

因此明天,我們就要將 Hexo 上傳到 Github Pages 上啦,屆時你的部落格就能夠呈現在網路上了。頁面建立好後,就等明天來見證這歷史的一刻吧(?)

本篇文章同步發布於我的部落格 Gui Blog


上一篇
Day 9:使用 Typora 發表你的第一篇 Hexo 文章
下一篇
Day 11:將你的 Hexo 部落格部屬到 Github Pages
系列文
30 天利用 Hexo 打造技術部落格30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言